<template>
  <div>
    <el-dialog
      :title="$t('common.download_center')"
      :visible.sync="Visible"
      width="800px"
      :close-on-click-modal="false"
      @close="cancel"
    >
        <div class="midContant clearfix">
            <div class="dialogBox top">
            <div class="dialogBoxTitle">{{$t('common.file_list')}}</div>
            <div class="headerBox">
                <el-form style="overflow: hidden;display: flex;flex-wrap: wrap;" ref="form" :model="filterData" size="mini" :inline="true">
                    <el-form-item label="文件来源：">
                        <div>
                            <el-select v-model="filterData.type" filterable :placeholder="$t('common.select_plactholder')">
                                <el-option
                                    v-for="item in typeoptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>

                        </div>
                    </el-form-item>
                </el-form>
                <div class="buttonGroup">
                    <span @click="search"><i class="icon_style el-icon-search"></i>{{$t('FilterBoxLang.search')}}</span>
                    <span @click="clear"><i class="icon_style el-icon-refresh"></i>{{$t('FilterBoxLang.clear')}}</span>
                </div>
            </div>
            <MyTable
                :tableColumn="tableColumn"
                :tableData="tableData"
                :isOrder="false"
            >
                <template v-slot:content="scope">
                    <span class="btnCLass" v-if="scope.config.templateType=='textBtn_downLoad'&&scope.row.status==2" @click="downLoadItem(scope.row)">{{$t('common.download')}}</span>
                    <span v-else>{{ scope.row[scope.config.prop] }}</span>
                </template>
            </MyTable>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
        </span>
        
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      filterData:{
        page: "",
        limit: "30",
        order: "",
        type:''
      },
      typeoptions:[],
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('common.file_name'),
          prop: "filename",
          width: 160,
        },
        {
          checked: true,
          label: this.$t('common.file_type'),
          prop: "type_name",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('common.file_status'),
          prop: "status_name",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('common.created_time'),
          prop: "created_at",
          width: 160,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.operation'),
          prop: "operation",
          width: 80,
          templateType:'textBtn_downLoad'
        },
      ],
      tableData: [],
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
        this.getTableData()
        this.Visible = true;
        this.getOptionsList()
    },
    // 获取下拉单列表
    async getOptionsList() {
      await this.$get("exportItems").then((res) => {
        this.typeoptions = res.data.export_type;
      });


    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.filterData.type= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:'download_center'}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", 'download_center');
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 获取表格level_1数据
    getTableData(){
      this.$get("tasks", {type:this.filterData.type}).then((res) => {
        this.tableData = res.data;
      });
    },
    downLoadItem(row){
        const link = document.createElement('a');
        link.href = this.$baseUrl+'/'+row.file_url;
        // link.setAttribute('download', fileName);
        link.click();
    },
    //取消
    cancel() {
      this.tableData = [];
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
    .midContant {
        border: 0;
        width: 100%;
    }
    .headerBox {
        height: 38px;
        transition: max-height 0.5s ease-out;
        margin-bottom: 15px;
        box-shadow: 0px 0px 2px#ccc;
        background-color: #EBEEF3;
        padding: 3px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .buttonGroup{
            min-width: 40px;
            display: flex;
            justify-content: flex-end;
            color: #474849;
            font-size: 14px;
            margin-right: 30px;
            cursor: pointer;
            gap: 10px;
        }
        /deep/ .el-form--inline .el-form-item{
            margin: 3px 0;
            .el-form-item__content{
                line-height: 1;
            }
            .el-select,.el-input--mini {
                width: 100%;
                .el-input__inner{
                    height: 32px !important;
                    line-height: 32px !important;
                    border-color: #EBEEF3 !important;
                    border-radius:6px !important;
                }
                .el-input__suffix{
                    top:2px;
                }
            }
        }
        /deep/ .el-form-item__label {
            line-height: 32px;
            padding: 0 0 0 15px;
        }
    }
</style>